@{
    ViewData["Title"] = "产品选择";
    Layout = null;
}

<link rel="stylesheet" href="~/layui/css/layui.css">

<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 搜索区域 -->
            <div class="layui-form layui-form-pane" style="margin-bottom: 15px;">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">产品编码</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search-productCode" placeholder="请输入产品编码" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">产品名称</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search-productName" placeholder="请输入产品名称" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">规格型号</label>
                        <div class="layui-input-inline">
                            <input type="text" id="search-specification" placeholder="请输入规格型号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button class="layui-btn" id="btn-search">搜索</button>
                        <button class="layui-btn layui-btn-primary" id="btn-reset">重置</button>
                    </div>
                </div>
            </div>

            <!-- 数据表格 -->
            <table id="productTable" lay-filter="productTable"></table>
        </div>
    </div>
</div>

<script src="~/layui/layui.js"></script>

<script>
    layui.use(['table', 'form', 'layer'], function(){
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;
        var $ = layui.$;
        
        // 初始化表格
        table.render({
            elem: '#productTable',
            url: '/SaleSendOrder/GetProducts',
            cols: [[
                {type: 'radio', width: 50},
                {field: 'productCode', title: '产品编码', width: 120},
                {field: 'productName', title: '产品名称', width: 200},
                {field: 'specification', title: '规格型号', width: 150},
                {field: 'unit', title: '单位', width: 80},
                {field: 'material', title: '材质', width: 100},
                {field: 'color', title: '颜色', width: 80}
            ]],
            page: true,
            height: 'full-120'
        });
        
        // 搜索按钮事件
        $('#btn-search').on('click', function(){
            var productCode = $('#search-productCode').val();
            var productName = $('#search-productName').val();
            var specification = $('#search-specification').val();
            
            var where = {};
            if(productCode) where.productCode = productCode;
            if(productName) where.productName = productName;
            if(specification) where.specification = specification;
            
            table.reload('productTable', {
                where: where,
                page: {curr: 1}
            });
        });
        
        // 重置按钮事件
        $('#btn-reset').on('click', function(){
            $('#search-productCode').val('');
            $('#search-productName').val('');
            $('#search-specification').val('');
            
            table.reload('productTable', {
                where: {},
                page: {curr: 1}
            });
        });
    });
</script> 